<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<#include "/admin/include/head.htm">
<script type="text/javascript">
	var paramNum = 0;
	var groupNum = 0;
	 $(function(){
	 	var numInfo = '${(numInfo)!"0,0"}';
		groupNum = parseInt(numInfo.split(",")[0]);
		paramNum = parseInt(numInfo.split(",")[1]);
		var mainform = $("#mainform");  
		//表单底部按钮 
    	LG.setFormDefaultBtn(parent.f_closeCurrentTab, function(){
			if(assemblyConfig()){
				return;
			}
			f_save(mainform, "component_list");
		});
		
	});
	
	function addParam(index){
		$('<tr id="param'+paramNum+'" name="param"><td style="text-align:center;width:50px;"><img src="${base}/resource/images/icons/silkicons/delete.png" onclick="deleteParam(' + paramNum + '); return false;"/></td>'
			+ '<td><input type="text" class="formText {required: true}"  /></td>'
			+ '<td><input type="text" class="formText {required: true}"  /></td></tr>').appendTo($("#group"+index));
		paramNum++;
	}
	
	function addTable(){
		$('<table class="table" name="configGroup" id="group' + groupNum + '"><div class="table_title" id="div' + groupNum + '">'
			+ '<img src="${base}/resource/images/communication.gif"><span>参数组</span><span><input type="text" name="configGroupName"/></span></div>'
			+ '<tr><td colspan="2"><input type="button" value="新增参数" onclick="addParam(' + groupNum + ');"/>&nbsp;'
			+ '<input type="button" value="删除参数组" onclick="deleteTable(' + groupNum + ');"/></td></tr>'
			+ '<tr><td style="text-align:center;width:50px;"></td><td style="text-align:center;width:150px;">'
			+ '参数名称</td><td style="text-align:center;width:150px;">参数值</td></tr></table>').appendTo($("#mainform"));
		groupNum++;
	}
	
	function deleteParam(num){
		$("#param"+num).remove();
	}
	
	function deleteTable(num){
		$("#group"+num).remove();
		$("#div"+num).remove();
	}

	
	function assemblyConfig(){
		var flag = false;
		var sort = '{';
		var paramStr = '{';
		$("[name='configGroup']").each(function(i,item){
			$table = $(item);
			var groupName = $("[name='configGroupName']")[i].value;
			if(groupName == ''){
				LG.tip('参数组名称不能为空!');
				flag = true;
				return;
			}
			if(i > 0){
				paramStr += ',';
				sort += ',';
			}
			paramStr += '"' + groupName + '":{';
			sort += '"' + groupName + '":"';
			var detail = "";
			$table.find('[name="param"]').each(function(i,item){
				var key = item.children[1].children[0].value;
				var value = item.children[2].children[0].value;
				if(key != ''){
					if(detail != ''){
						detail += ',';
						sort += ',';
					}
					detail += '"' + key + '":"' + value + '"';
					sort += key;
				}
			});
			paramStr += detail + "}";
			sort += '"';
		});
		paramStr += "}";
		sort += "}";
		$("#paramStr").val(paramStr);
		$("#configSort").val(sort);
		return flag;
	}
</script>
</head>
<#assign index = 0>
<#if !component??>
	<#assign isAdd = true />
<#else>
	<#assign isEdit = true /> 
</#if>
<body style="padding:10px;">
	<div id="tabcontainer" style="margin:0; padding:0">
		<form id="mainform" name="mainform" class="validate" action="${base}/admin/system/component/<#if isAdd??>save.jhtml<#else>update.jhtml</#if>" method="post" class="validate">
			<input type="hidden" name="id" value="${(component.id)!''}"/>
			<input type="hidden" name="paramStr" id="paramStr"/>
			<input type="hidden" name="configSort" id="configSort"/>
			<table class="table">
				<tr>
					<th>组件名称：</th>
					<td>
						<input type="text" name="name" value="${(component.name)!''}" 
							class="formText {required: true, minlength: 2, maxlength: 20, remote: 'checkName.jhtml?oldValue=${(component.name)!}', messages: {remote: '插件名称已存在!'}}" />
					</td>
				</tr>
				<tr>
					<th>插件ID：</th>
					<td>
						<input type="text" name="componentId" value="${(component.componentId)!''}" 
							class="formText {required: true, maxlength: 50}" />
					</td>
				</tr>
				<tr>
					<th>组件类型：</th>
					<td>
						<@u.select headerKey="" headerValue="请选择"  listKey="id" listValue="name"
							headerButtom="false" list=bundleList value="${(component.componentBundle.id)!''}"
							name="componentBundle.id" class="{required: true}"/>
					</td>
				</tr>
				<tr>
					<th>当前模式：</th>
					<td>
						<@u.radio name="isOfficial" list={'true': '正式环境', 'false':'测试环境'} 
							value="${((component.isOfficial)?string('true', 'false'))!'false'}"/>
					</td>
				</tr>
				<tr>
					<th>作者：</th>
					<td>
						<input type="text" value="${(component.author)!''}" name="author" class="formText {required: true, maxlength: 50}"  />
					</td>
				</tr>
				<tr>
					<th>
						支持版本：
					</th>
					<td>
						<input type="text" value="${(component.shopVersion)!''}" name="shopVersion" class="formText {required: true, maxlength: 50}"  />
					</td>
				</tr>
				<tr>
					<th>版本：</th>
					<td>
						<input type="text" value="${(component.version)!''}" name="version" class="formText {required: true, maxlength: 50}"  />
					</td>
				</tr>
				<tr>
					<th>排序：</th>
					<td>
						<input type="text" value="${(component.orders)!''}" name="orders" class="formText {required: true, maxlength: 10,digits:true}"  />
					</td>
				</tr>
				<tr>
					<th>备注：</th>
					<td colspan="2">
						<textarea name ="description" style="width: 455px; height: 165px;resize:none;" class="formArea {maxlength: 250}">${(component.description)!''}</textarea>
					</td>
				</tr>
				<tr>
					<th>参数：</th>
					<td>
						<input type="button" value="增加参数组" onclick="addTable()"/>
					</td>
				</tr>
			</table>
			<#if config??>
				<#list config.keys() as key>
					<table class="table" name="configGroup" id="group${key_index}">
						<div class="table_title" id="div${key_index}">
							<img src="${base}/resource/images/communication.gif">
							<span>参数组</span>
							<span><input type="text" name="configGroupName" value="${key}"/></span>
						</div>
						<tr>
							<td colspan="2">
								<input type="button" value="新增参数" onclick="addParam('${key_index}');"/>&nbsp;
								<input type="button" value="删除参数组" onclick="deleteTable('${key_index}');"/>
							</td>
						</tr>
						<tr>
							<td style="text-align:center;width:50px;">
							</td>
							<td style="text-align:center;width:150px;">
								参数名称
							</td>
							<td style="text-align:center;width:150px;">
								参数值
							</td>
						</tr>
						<#list config[key].keys() as param>
							<tr id="param${index}" name="param">
								<td style="text-align:center;width:50px;">
									<img src="${base}/resource/images/icons/silkicons/delete.png" onclick="deleteParam('${index}'); return false;"/>
								</td>
								<td>
									<input type="text" class="formText {required: true}" value='${(param)!""}' />
								</td>
								<td>
									<input type="text" class="formText {required: true}" value='${(config[key][param])!""}' />
								</td>
							</tr>
							<#assign index = index+1 >
						</#list>
					</table>
					<br />
				</#list>
			</#if>
		</form>
		<table>
			<tr>
				<td style="height:100px;">&nbsp;</td>
			</tr>
		</table>
	</div>
</body>
</html>